<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>three-focus中心区域</title>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/nav-site.css"/>
    <link rel="stylesheet" href="css/search.css"/>
    <link rel="stylesheet" href="css/center-focus.css"/>
</head>
<body>
<!--------------------------------------------------- 站点导航开始 ---------------------------------------------------->
<div class="nav-site" id="nav-site">
    <div class="container">
        <ul class="fl">
            <li class="fl"><a href="javascript:" class="nav-site-login">亲，请登录</a></li>
            <li class="fl"><a href="javascript:" class="nav-site-signup link">免费注册</a></li>
            <li class="fl"><a href="#" class="nav-site-mobile link">手机逛慕淘</a></li>
        </ul>
        <ul class="fr">
            <li class="menu dropdown fl" data-active="menu">
                <a href="#" class="dropdown-toggle link  transition">我的慕淘<i class="dropdown-arrow icon transition">&#xe609;</i></a>
                <ul class="dropdown-layer dropdown-left">
                    <li><a href="#" class="dropdown-item">已买到的宝贝</a></li>
                    <li><a href="#" class="dropdown-item">我的足迹</a></li>
                </ul>
            </li>
            <li class="menu dropdown fl" data-active="menu">
                <a href="#" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow icon transition">&#xe609;</i></a>
                <ul class="dropdown-layer dropdown-left">
                    <li><a href="#" class="dropdown-item">收藏的宝贝</a></li>
                    <li><a href="#" class="dropdown-item">收藏的店铺</a></li>
                </ul>
            </li>
            <li class="fl">
                <a href="#" class="nav-site-category link">商品分类</a>
            </li>
            <li class="menu dropdown fl" data-active="menu" data-load="json/dropdown-seller.json" data-load_menu="nav_site">
                <a href="#" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transition">&#xe609;</i></a>
                <ul class="dropdown-layer dropdown-left">
                    <li class="dropdown-loading"></li> <!-- 模拟延迟加载 -->
                    <!--  <li><a href="#"  class="dropdown-item">免费开店</a></li>
                         <li><a href="#"  class="dropdown-item">已卖出的宝贝</a></li>
                         <li><a href="#"  class="dropdown-item">出售中的宝贝</a></li>
                         <li><a href="#"  class="dropdown-item">卖家服务市场</a></li>
                         <li><a href="#"  class="dropdown-item">卖家培训中心</a></li>
                         <li><a href="#"  class="dropdown-item">体验中心</a></li> -->
                </ul>
            </li>
            <li class="menu dropdown fl nav-site-service" data-active="menu">
                <a href="#" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow icon transition">&#xe609;</i></a>
                <ul class="dropdown-layer dropdown-left">
                    <li><a href="#" class="dropdown-item">消费者客服</a></li>
                    <li><a href="#" class="dropdown-item">卖家客服</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!--------------------------------------------------- 站点导航结束 ---------------------------------------------------->
<!--------------------------------------------------- header  start ------------------------------------------------->
<div class="header">
    <div class="container">
        <h1 class="fl"><a href="three-focus中心区域.html" class="header-logo text-hidden">自学网</a></h1>
        <div id="header-search" class="search fl">
            <form action="https://s.taobao.com/search" class="search-form">
                <input type="text" name="q" placeholder="灵魂美食一元抢" autocomplete="off"
                       class="search-input-box fl"/>
                <input type="submit" value="搜索" class="search-btn btn fl"/>
            </form>
            <ul class="search-layer">
                <li class="search-layer-item text-ellipsis">111</li>
                <li class="search-layer-item text-ellipsis">111</li>
                <li class="search-layer-item text-ellipsis">111</li>
            </ul>
        </div>
    </div>
</div>
<!--------------------------------------------------- header  end   ------------------------------------------------->
<!---------------------------------------------------- 中心部分导航 start---------------------------------------------------------------->
<!-- 中心部分导航 header  -->
<div class="nav-main">
    <div class="container">
        <a href="#" class="link">数码城</a>
        <a href="#" class="link">天黑黑</a>
        <a href="#" class="link">团购</a>
        <a href="#" class="link">发现</a>
        <a href="#" class="link">二手特价</a>
        <a href="#" class="link">名品汇</a>
    </div>
</div>
<!-- 中心部分导航 中间部分(左边是下拉框 + 中间是轮播图 + 右边是慕快报)  -->
<div class="focus">
    <div class="container">
        <div id="focus-category" class="category fl">
            <a href="#" target="_blank" class="category-title"><i class="icon">&#xe608;</i>商品分类</a>
            <ul class="category-list">
                <li class="dropdown" data-active="category" data-load="json/category-detail-1.json" data-load_menu="focus_category">
                    <div class="dropdown-toggle">
                        <a href="#" target="_blank" class="dropdown-link">家用电器</a>
                        <i class="dropdown-arrow">&gt;</i>
                    </div>
                    <div class="dropdown-layer">
                        <div class="dropdown-loading"></div>
                    </div>
                </li>
                <li class="dropdown" data-active="category" data-load="json/category-detail-2.json" data-load_menu="focus_category">
                    <div class="dropdown-toggle">
                        <a href="#" target="_blank" class="dropdown-link">手机</a>、
                        <a href="#" target="_blank" class="dropdown-link">运营商</a>、
                        <a href="#" target="_blank" class="dropdown-link">数码</a>
                        <i class="dropdown-arrow">&gt;</i>
                    </div>
                    <div class="dropdown-layer">
                        <div class="dropdown-loading"></div>
                    </div>
                </li>
                <li class="dropdown" data-active="category" data-load="json/category-detail-3.json" data-load_menu="focus_category">
                    <div class="dropdown-toggle">
                        <a href="#" target="_blank" class="dropdown-link">电脑</a>、
                        <a href="#" target="_blank" class="dropdown-link">办公</a>
                        <i class="dropdown-arrow">&gt;</i>
                    </div>
                    <div class="dropdown-layer">
                        <div class="dropdown-loading"></div>
                    </div>
                </li>
                <li class="dropdown" data-active="category" data-load="json/category-detail-4.json" data-load_menu="focus_category">
                    <div class="dropdown-toggle">
                        <a href="#" target="_blank" class="dropdown-link">家居</a>、
                        <a href="#" target="_blank" class="dropdown-link">家具</a
                        >、<a href="#" target="_blank" class="dropdown-link">家装</a>、
                        <a href="#" target="_blank" class="dropdown-link">厨具</a>
                        <i class="dropdown-arrow">&gt;</i>
                    </div>
                    <div class="dropdown-layer">
                        <div class="dropdown-loading"></div>
                    </div>
                </li>
                <li class="dropdown" data-active="category" data-load="json/category-detail-5.json" data-load_menu="focus_category">
                    <div class="dropdown-toggle">
                        <a href="#" target="_blank" class="dropdown-link">男装</a>、
                        <a href="#" target="_blank" class="dropdown-link">女装</a>、
                        <a href="#" target="_blank" class="dropdown-link">童装</a>、
                        <a href="#" target="_blank" class="dropdown-link">内衣</a>
                        <i class="dropdown-arrow">&gt;</i>
                    </div>
                    <div class="dropdown-layer">
                        <div class="dropdown-loading"></div>
                    </div>
                </li>
                <li class="dropdown" data-active="category" data-load="json/category-detail-6.json" data-load_menu="focus_category">
                    <div class="dropdown-toggle">
                        <a href="#" target="_blank" class="dropdown-link">化妆</a>、
                        <a href="#" target="_blank" class="dropdown-link">清洁</a>、
                        <a href="#" target="_blank" class="dropdown-link">宠物</a>
                        <i class="dropdown-arrow">&gt;</i>
                    </div>
                    <div class="dropdown-layer">
                        <div class="dropdown-loading"></div>
                    </div>
                </li>
                <li class="dropdown" data-active="category" data-load="json/category-detail-7.json" data-load_menu="focus_category">
                    <div class="dropdown-toggle">
                        <a href="#" target="_blank" class="dropdown-link">运动户外</a>、
                        <a href="#" target="_blank" class="dropdown-link">钟表</a>
                        <i class="dropdown-arrow">&gt;</i>
                    </div>
                    <div class="dropdown-layer">
                        <div class="dropdown-loading"></div>
                    </div>
                </li>
                <li class="dropdown" data-active="category" data-load="json/category-detail-8.json" data-load_menu="focus_category">
                    <div class="dropdown-toggle">
                        <a href="#" target="_blank" class="dropdown-link">汽车</a>、
                        <a href="#" target="_blank" class="dropdown-link">汽车用品</a>
                        <i class="dropdown-arrow">&gt;</i>
                    </div>
                    <div class="dropdown-layer">
                        <div class="dropdown-loading"></div>
                    </div>
                </li>
                <li class="dropdown" data-active="category" data-load="json/category-detail-9.json" data-load_menu="focus_category">
                    <div class="dropdown-toggle">
                        <a href="#" target="_blank" class="dropdown-link">母婴</a>、
                        <a href="#" target="_blank" class="dropdown-link">玩具乐器</a>
                        <i class="dropdown-arrow">&gt;</i>
                    </div>
                    <div class="dropdown-layer">
                        <div class="dropdown-loading"></div>
                    </div>
                </li>
                <li class="dropdown" data-active="category" data-load="json/category-detail-10.json" data-load_menu="focus_category">
                    <div class="dropdown-toggle">
                        <a href="#" target="_blank" class="dropdown-link">食品</a>、
                        <a href="#" target="_blank" class="dropdown-link">酒类</a>、
                        <a href="#" target="_blank" class="dropdown-link">生鲜</a>、
                        <a href="#" target="_blank" class="dropdown-link">特产</a>
                        <i class="dropdown-arrow">&gt;</i>
                    </div>
                    <div class="dropdown-layer">
                        <div class="dropdown-loading"></div>
                    </div>
                </li>
                <li class="dropdown" data-active="category" data-load="json/category-detail-11.json" data-load_menu="focus_category">
                    <div class="dropdown-toggle">
                        <a href="#" target="_blank" class="dropdown-link">医药保健</a>
                        <i class="dropdown-arrow">&gt;</i>
                    </div>
                    <div class="dropdown-layer">
                        <div class="dropdown-loading"></div>
                    </div>
                </li>
                <li class="dropdown" data-active="category" data-load="json/category-detail-12.json" data-load_menu="focus_category">
                    <div class="dropdown-toggle">
                        <a href="#" target="_blank" class="dropdown-link">图书</a>、
                        <a href="#" target="_blank" class="dropdown-link">音像</a>、
                        <a href="#" target="_blank" class="dropdown-link">电子书</a>
                        <i class="dropdown-arrow">&gt;</i>
                    </div>
                    <div class="dropdown-layer">
                        <div class="dropdown-loading"></div>
                    </div>
                </li>
                <li class="dropdown" data-active="category" data-load="json/category-detail-13.json" data-load_menu="focus_category">
                    <div class="dropdown-toggle">
                        <a href="#" target="_blank" class="dropdown-link">彩票</a>、
                        <a href="#" target="_blank" class="dropdown-link">旅行</a>、
                        <a href="#" target="_blank" class="dropdown-link">充值</a>、
                        <a href="#" target="_blank" class="dropdown-link">票务</a>
                        <i class="dropdown-arrow">&gt;</i>
                    </div>
                    <div class="dropdown-layer">
                        <div class="dropdown-loading"></div>
                    </div>
                </li>
                <li class="dropdown" data-active="category" data-load="json/category-detail-14.json" data-load_menu="focus_category">
                    <div class="dropdown-toggle">
                        <a href="#" target="_blank" class="dropdown-link">理财</a>、
                        <a href="#" target="_blank" class="dropdown-link">众筹</a>、
                        <a href="#" target="_blank" class="dropdown-link">白条</a>、
                        <a href="#" target="_blank" class="dropdown-link">保险</a>
                        <i class="dropdown-arrow">&gt;</i>
                    </div>
                    <div class="dropdown-layer">
                        <div class="dropdown-loading"></div>
                    </div>
                </li>
            </ul>
        </div>
        <div id="focus-slider" class="slider fl">
            <!--轮播图-->
            <div class="slider-container">
                <div class="slider-item">
                    <!-- <a href="#" target="_blank"><img src="loading.gif" data-src="https://gratisography.com/pictures/407_1.jpg" alt="" class="slider-img" /></a> -->
                    <a href="#" target="_blank">
                        <img src="image/focus-slider/loading.gif" data-src="image/focus-slider/1.png" alt=""
                             class="slider-img"/>
                    </a>
                </div>
                <div class="slider-item">
                    <a href="#" target="_blank">
                        <img src="image/focus-slider/loading.gif" data-src="image/focus-slider/2.png" alt=""
                             class="slider-img"/>
                    </a>
                </div>
                <div class="slider-item">
                    <a href="#" target="_blank">
                        <img src="image/focus-slider/loading.gif" data-src="image/focus-slider/3.png" alt=""
                             class="slider-img"/>
                    </a>
                </div>
                <div class="slider-item">
                    <a href="#" target="_blank">
                        <img src="image/focus-slider/loading.gif" data-src="image/focus-slider/4.png" alt=""
                             class="slider-img"/>
                    </a>
                </div>
            </div>
            <!--轮播图下标-->
            <ol class="slider-indicator-wrap">
                <li class="slider-indicator text-hidden fl">1</li>
                <li class="slider-indicator text-hidden fl">2</li>
                <li class="slider-indicator text-hidden fl">3</li>
                <li class="slider-indicator text-hidden fl">4</li>
            </ol>
            <!--轮播图 左右 箭头 -->
            <a href="javascript:;" class="slider-control slider-control-left">&lt;</a>
            <a href="javascript:;" class="slider-control slider-control-right">&gt;</a>
        </div>
        <div class="focus-sidebar fr">
            <div class="focus-news">
                <div class="focus-news-head">
                    <h2 class="focus-news-title fl">慕快报</h2>
                    <a href="#" target="_blank" class="link fr">更多 &gt;</a>
                </div>
                <div class="focus-news-body">
                    <p class="text-ellipsis"><a href="#" target="_blank" class="link"><strong>[特惠]</strong>精选图书每满150减50</a></p>
                    <p class="text-ellipsis"><a href="#" target="_blank" class="link"><strong>[公告]</strong>因广州图书仓搬仓升级配送延迟</a></p>
                    <p class="text-ellipsis"><a href="#" target="_blank" class="link"><strong>[特惠]</strong>爆款手机12期免息</a></p>
                    <p class="text-ellipsis"><a href="#" target="_blank" class="link"><strong>[公告]</strong>广东、福建受台风影响配送延迟</a></p>
                    <p class="text-ellipsis"><a href="#" target="_blank" class="link"><strong>[特惠]</strong>大闸蟹领券满399减180</a></p>
                </div>
            </div>
            <div class="focus-service cf">
                <a href="#" target="_blank" class="focus-service-item fl"><i class="icon focus-service-icon">&#xe612;</i><span class="focus-service-text">话费</span></a>
                <a href="#" target="_blank" class="focus-service-item fl"><i class="icon focus-service-icon">&#xe611;</i><span class="focus-service-text">机票</span></a>
                <a href="#" target="_blank" class="focus-service-item fl"><i class="icon focus-service-icon">&#xe607;</i><span class="focus-service-text">电影票</span></a>
                <a href="#" target="_blank" class="focus-service-item fl"><i class="icon focus-service-icon">&#xe60e;</i><span class="focus-service-text">游戏</span></a>
                <a href="#" target="_blank" class="focus-service-item fl"><i class="icon focus-service-icon">&#xe605;</i><span class="focus-service-text">彩票</span></a>
                <a href="#" target="_blank" class="focus-service-item fl"><i class="icon focus-service-icon">&#xe603;</i><span class="focus-service-text">加油卡</span></a>
                <a href="#" target="_blank" class="focus-service-item fl"><i class="icon focus-service-icon">&#xe602;</i><span class="focus-service-text">酒店</span></a>
                <a href="#" target="_blank" class="focus-service-item fl"><i class="icon focus-service-icon">&#xe601;</i><span class="focus-service-text">火车票</span></a>
                <a href="#" target="_blank" class="focus-service-item fl"><i class="icon focus-service-icon">&#xe60d;</i><span class="focus-service-text">众筹</span></a>
                <a href="#" target="_blank" class="focus-service-item fl"><i class="icon focus-service-icon">&#xe60c;</i><span class="focus-service-text">理财</span></a>
                <a href="#" target="_blank" class="focus-service-item fl"><i class="icon focus-service-icon">&#xe610;</i><span class="focus-service-text">礼品卡</span></a>
                <a href="#" target="_blank" class="focus-service-item fl"><i class="icon focus-service-icon">&#xe60f;</i><span class="focus-service-text">白条</span></a>
            </div>
            <div class="focus-ad"></div>
        </div>
    </div>
</div>
<!------------ 中心部分导航 today部分 ----------------->
<div class="today">
    <div class="container">
        <div id="today-slider" class="slider">
            <div class="slider-container">
                <div class="slider-item">
                    <a href="#" target="_blank" class="fl"><img src="image/today-slider/loading.gif" alt="" data-src="image/today-slider/1.png" class="slider-img"/></a>
                    <a href="#" target="_blank" class="fl"><img src="image/today-slider/loading.gif" alt="" data-src="image/today-slider/2.png" class="slider-img"/></a>
                    <a href="#" target="_blank" class="fl"><img src="image/today-slider/loading.gif" alt="" data-src="image/today-slider/3.png" class="slider-img"/></a>
                    <a href="#" target="_blank" class="fl"><img src="image/today-slider/loading.gif" alt="" data-src="image/today-slider/4.png" class="slider-img"/></a>
                    <a href="#" target="_blank" class="fl"><img src="image/today-slider/loading.gif" alt="" data-src="image/today-slider/5.png" class="slider-img"/></a>
                </div>
                <div class="slider-item">
                    <a href="#" target="_blank" class="fl"><img src="image/today-slider/loading.gif" alt="" data-src="image/today-slider/6.png" class="slider-img"/></a>
                    <a href="#" target="_blank" class="fl"><img src="image/today-slider/loading.gif" alt="" data-src="image/today-slider/7.png" class="slider-img"/></a>
                    <a href="#" target="_blank" class="fl"><img src="image/today-slider/loading.gif" alt="" data-src="image/today-slider/8.png" class="slider-img"/></a>
                    <a href="#" target="_blank" class="fl"><img src="image/today-slider/loading.gif" alt="" data-src="image/today-slider/9.png" class="slider-img"/></a>
                    <a href="#" target="_blank" class="fl"><img src="image/today-slider/loading.gif" alt="" data-src="image/today-slider/10.png" class="slider-img"/></a>
                </div>
                <div class="slider-item">
                    <a href="#" target="_blank" class="fl"><img src="image/today-slider/loading.gif" alt="" data-src="image/today-slider/11.png" class="slider-img"/></a>
                    <a href="#" target="_blank" class="fl"><img src="image/today-slider/loading.gif" alt="" data-src="image/today-slider/3.png" class="slider-img"/></a>
                    <a href="#" target="_blank" class="fl"><img src="image/today-slider/loading.gif" alt="" data-src="image/today-slider/5.png" class="slider-img"/></a>
                    <a href="#" target="_blank" class="fl"><img src="image/today-slider/loading.gif" alt="" data-src="image/today-slider/7.png" class="slider-img"/></a>
                    <a href="#" target="_blank" class="fl"><img src="image/today-slider/loading.gif" alt="" data-src="image/today-slider/9.png" class="slider-img"/></a>
                </div>
            </div>
            <a href="javascript:" class="slider-control slider-control-left">&lt;</a>
            <a href="javascript:" class="slider-control slider-control-right">&gt;</a>
        </div>
    </div>
</div>
<!---------------------------------------------------- 中心部分导航 end------------------------------------------------------------------->

<!-- <script src="js/jquery.js"></script> 引用本地jquery.js -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> cdn引用方法-->
<script>
    window.jQuery || document.write('<script src="js/jquery.js"><\/script>'); //判断是否有jquery库
</script>
<script src="js/transition.js"></script><!-- 当前浏览器支持 transition 的信息-->
<script src="js/showHide.js"></script><!-- 显示隐藏元素 -->
<script src="js/dropdown.js"></script><!-- 显示隐藏下拉框 -->
<script src="js/nav-site.js"></script><!-- 站点导航js调用 -->
<script src="js/search.js"></script><!--search框-->

<!-- 中心区域 focus-center -->
<script src="js/focus-center__category.js"></script><!--商品分类调用-->

<script src="js/move.js"></script><!--轮播图1-->
<script src="js/slideShow.js"></script><!--轮播图2-->
<script src="js/lazyLoad.js"></script><!--延迟加载-->
<script src="js/focus-center__slideshow.js"></script><!--轮播图调用-->

</body>
</html>